<template>
  <div class="box">
    <div class="upload">
      <span class="title">上传图片</span>
      <img-page />
    </div>
    <br>
    <!-- 插入组件 -->
    <div class="content2">
    <span>图片列表：</span>
      <div class="item-box">
        <get-imgs
            class="items" 
            v-for="item in data" 
            :key="item.caption" 
            :text="item.caption" 
            :url="item.imgUrl"/>
      </div>   
    </div>
  </div>
</template>

<script>
import ImgPage from 'views/ImgUpload/index.vue'
import GetImgs from 'views/ImgUpload/GetImg.vue'

export default {
  name: 'UploadImg',
  data() {
    return {
      data: null
    }
  },
  components: {
   ImgPage,
   GetImgs,
  },
  methods: {
    getData() {
      this.axios.get('/data/imgs.json')
      .then((res) => {
        this.data = res.data.Data;
      })
      .catch((err) => {
        console.log(err);
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
  .box {
    width: 100%;
  }
  .upload {
    width: 80%;
    margin: 100px 10% 0;
  }
  .upload > .title {
    color: cornflowerblue;
  }
  .content2 {
    width: 80%;
    margin: 0 auto;
    /* border: 1px solid red; */
    
  }
  .item-box {
    width: 100%;
    overflow: hidden;
    padding: 0 20px;
  }
  .items {
    width: 300px;
    height: 170px;
    padding: 20px 10px;
    float: left;
    /* border: 1px solid blue; */
  }
</style>
